<template>
  <div class="permission">
    <div class="operate">
      <div>
        <div style="flex: 0 0 auto">
          <ep-search
              v-model="queryParam.h0205"
              :size="size"
              placeholder="请输入申报单位"
              enter-button="chaxun"
              @search="
              () => {
                this.findList();
              }
            "
          ></ep-search>
        </div>
        <a-tree-select
            placeholder="请选择区划"
            ref="taskArea"
            allowClear
            tree-checkable
            style="margin-left: 15px;width:16vw"
            v-model="queryParam.h0202List"
            :show-checked-strategy="SHOW_PARENT"
            :treeData="taskAreaTree"
            @change="findList()"
            :size="size"
        />
        <!-- <zh-input prop="h0202"  :size="size" :options="dictData.XZQH"  type="select"  placeholder="区划" v-model="queryParam.h0202" 
            style="width:200px;margin-left: 15px"></zh-input> -->
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="refresh.svg"
            @click="
            () => {
              this.flushPage();
            }
          "
        ></ep-button>
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="add.svg"
            @click="
            () => {
              this.addCase();
            }
          "
        >新增</ep-button
        >
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="edit.svg"
            @click="
            () => {
              this.openH26();
            }
          "
        >经费广播</ep-button
        >
      </div>

      <div>
        <column-manage :column.sync="tableColumn" @change="columnChange"></column-manage>
<!--        <ep-button-->
<!--            :size="size"-->
<!--            style="margin-left: 15px"-->
<!--            icon="export.svg"-->
<!--            @click="-->
<!--            () => {-->
<!--              this.exportExcel();-->
<!--            }-->
<!--          "-->
<!--        >导入</ep-button>-->
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="export.svg"
            @click="
            () => {
              this.exportExcel();
            }
          "
        >导出</ep-button
        >
      </div>
    </div>

    <a-modal
        :title="modalTitle"
        centered
        style="margin-top:100px;"
        width="65%"
        height="80%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleOk"
        @cancel="handleCancel"
    >
    <div style="display: flex;flex-direction: row;justify-content: flex-end">
      <span style="float: right">经费单位：万元</span>
    </div>
    <zh-row :span="24" :gutter="[16,16]">
      <zh-col>
              <zh-form  ref="formInfo"  :model="formInfo"  labelAlign="right" >
                    <zh-input prop="h0202" label="区划" :options="dictData.XZQH"  type="select"  placeholder="区划" v-model="formInfo.h0202"></zh-input>
                    <zh-input prop="h0205" label="申报单位" type="text" placeholder="申报单位" v-model="formInfo.h0205" ></zh-input>
                    <zh-input prop="h0210" label="年度"  type="year" placeholder="年度" v-model="formInfo.h0210" ></zh-input>
                    <zh-input prop="h0206" label="评估值"  type="number" placeholder="评估值" v-model="formInfo.h0206" ></zh-input>
                    <zh-input prop="h0207" label="申报经费"  type="number" placeholder="申报经费(单位/万元)" v-model="formInfo.h0207" ></zh-input>
                    <zh-input prop="h0208" label="落地经费"  type="number" placeholder="落地经费(单位/万元)" v-model="formInfo.h0208" ></zh-input>
                    <zh-input prop="ldv" :disabled = "true" label="落地率"  type="text" placeholder="落地率" v-model="ldl"  ></zh-input>
                    <zh-input prop="h0209" label="已使用经费"  type="number" placeholder="已使用经费(单位/万元)" v-model="formInfo.h0209" ></zh-input>
                    <zh-input prop="zxl" :disabled = "true" label="执行率"  type="text" placeholder="执行率" v-model="zxl"  ></zh-input>
              </zh-form>
          </zh-col>
      </zh-row>
    </a-modal>

    <a-modal
        title="经费广播"
        centered
        style="margin-top:100px;"
        width="65%"
        height="80%"
        destroyOnClose
        v-model="h26Visible"
        cancelText="关闭"
        okText="保存"
        @ok="updateH26"
        @cancel="()=>{this.h26Visible = false}"
    >
      <zh-form  ref="h26FormInfo"  :model="h26FormInfo"  labelAlign="right" >
        <zh-card style="width:100%;float:left">
          <zh-row :span="18">
            <zh-col>

                <zh-input
                    prop="h2602" label="经费广播" type="textarea" :rows="3"
                           placeholder="经费广播" v-model="h26FormInfo.h2602" ></zh-input>

            </zh-col>
          </zh-row>
        </zh-card>
      </zh-form>
    </a-modal>

    <a-modal
        :title="modalTitle"
        centered
        style="margin-top:100px;"
        width="65%"
        height="80%"
        destroyOnClose
        v-model="visible1"
        :footer="null"
    >
    <zh-row :span="24" :gutter="[16,16]">
      <zh-col>
            <zh-form :disabled="true"   v-if="this.nodeList.length > 0"  ref="nodeInfo"  :model="nodeInfo"  labelAlign="right">
                    <zh-input
                     v-for="(item, index) in this.nodeList"
                      :value="item.h1102"
                      :key="index"
                      prop="h0202" :label="'节点'+index"
                      v-model="item.h1102"></zh-input>
            </zh-form>
            <zh-form  v-else  ref="nodeInfo"  :model="nodeInfo"  labelAlign="right">
                 <div>暂无流程环节</div>
            </zh-form>
          </zh-col>
      </zh-row>
    </a-modal>

    <div class="ep-table">
      <zh-table
          ref="tableList"
          style="width: 100%"
          :data="tableData"
          height="auto"
          rowId="roleId"
          type="paging"
          :url = "tableUrl"
          :columns="tableColumn"
      >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button @click="view(row)"> 查看</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button @click="edit(row)">编辑</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button @click="del(row)">删除</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
  </div>
</template>

<script>
import modal from "ant-design-vue/es/modal";
import {
  getProtectionFunds,
  saveProtectionFunds,
  delProtectionFunds,
  updateProtectionFunds,
  getNodeList,
  getPermissionParams,
  getH26,
  updateH26
} from "@/services/system/whdngxlApi";
import ZhTable from "@/components/zh-table/ZhTable";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import { getBatchDict } from "@/services/system/api";
import ColumnManage from "@/components/assembly/columnManage";
import {mapGetters} from "vuex";
import {TreeSelect} from "ant-design-vue";
import { isEmptyStr } from '@/utils/util';
export default {
  name: "PatrolTaskConfig",
  components: {
    ZhTable,
    ColumnManage
  },
  computed: {
    ...mapGetters(['size']),
       ldl(){
        if(isEmptyStr(this.formInfo.h0207) || isEmptyStr(this.formInfo.h0208) || this.formInfo.h0208 == '0' || this.formInfo.h0207 == '0'){
            return "0%";
        }else{
            return ((this.formInfo.h0208/this.formInfo.h0207)*100).toFixed(2)+"%";
        }
      },
      zxl(){
        if(isEmptyStr(this.formInfo.h0208) || this.formInfo.h0209 == '0' || this.formInfo.h0208 == '0'){
            return  "0%";
        }else{
            return ((this.formInfo.h0209/this.formInfo.h0208)*100).toFixed(2)+"%";
        }
      }
  },
  data() {
    return {
      dictData: {},
      modalTitle:'',
      labelCol: { sm: { span: 2 }, md: { span: 2 }, xs: { span: 24 }, lg: { span: 2 }, xl: { span: 2 }, xxl: { span: 2 } },
      wrapperCol: { sm: { span: 22 }, md: { span: 22 }, xs: { span: 24 }, lg: { span: 22 }, xl: { span: 22 }, xxl: { span: 22 } },
      queryParam: {
        h0205:'',
        h0202List:[]
      },
      nodeInfo:{},
      formInfo:{},
      h26FormInfo: {
        h2602: undefined
      },
      tableColumn: [
        // { type: "checkbox", width: 50, fixed: "left", visible: true },
        {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号',visible: true},
        {field: "h0202Name",title: "区划",align: "center",width: 100,visible: true,},
        {field: "h0205",title: "申报单位",align: "center",width: 200,visible: true,},
        {field: "h0206",title: "评估值(单位/万元)",align: "center",width: 200,visible: true,},
        {field: "h0207",title: "申报经费(单位/万元)",align: "center",width: 200,visible: true,},
        {field: "h0208",title: "落地经费(单位/万元)",align: "center",width: 200,visible: true,},
        {field: "ldl",title: "落地率",align: "center",width: 150,visible: true,},
        {field: "h0209",title: "已使用经费(单位/万元)",align: "center",width: 200,visible: true,},
        {field: "zxl",title: "执行率",align: "center",width: 150,visible: true,},
        {field: "operate",title: "操作",fixed: "right",align: "center",width: 300, slots: { default: "operate",},visible: true, },
      ],
      tableData: [],
      visible: false,
      visible1:false,
      loading: false,
      tableUrl: getProtectionFunds,
      nodeList:[],
      taskAreaTree:[],
      SHOW_PARENT,
      h26Visible: false
    };
  },
  created() {
    const param = {}
    param.dictFields = 'H0104,H0106,H0110,XZQH'
    this.$http.post(getBatchDict, param).then(res => {
      this.dictData = res.result
    })
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
  },
  mounted(){
      this.findList()
    },
  methods: {
    openH26(){
      this.$http.post(getH26, {}).then(res => {
        this.h26FormInfo = res.result
      })
      this.h26Visible = true
    },
    updateH26(){
      this.$loading.show("正在处理数据,请等待...");
      this.$http.post(updateH26, this.h26FormInfo).then(res => {
        this.$message.info("编辑成功");
        this.h26Visible = false
      }).finally(()=>{
        this.$loading.hide()
      })
    },
    handleOk() {
      if(this.formInfo.h0201){
            const param = this.formInfo
            this.$http.post(updateProtectionFunds, param).then(res => {
            if(res.code === 0){
              modal.info({title: '成功提示', content: '修改成功'});
              this.findList()
            }else{
              modal.info({title: '失败提示', content: '修改失败'});
            }
            this.visible = false
          })
        }else{
          const params = this.formInfo
          this.$http.post(saveProtectionFunds,params).then(res => {
            if(res.code === 0){
              modal.info({title: '成功提示', content: '保存成功'});
              this.findList()
            }else{
              modal.info({title: '失败提示', content: '保存失败'});
            }
            this.visible = false
          })
        }
    },
    handleCancel() {
      this.visible = false;
    },
    addAndOpen() {
      this.$nextTick(() => {
        this.$refs.illegalCaseForm.taskSave(2);
      });
    },
    showOrHide() {
      this.visible = !this.visible;
    },
    findList() {
      if(!isEmptyStr(this.queryParam.h0202List)){
         this.queryParam.h0202 = this.queryParam.h0202List[0]
      }
      this.$refs.tableList.query(this.queryParam)
    },
    addCase() {
      this.modalTitle = '新增'
      this.formInfo = {}
      this.showOrHide();
      this.nodeList = []
    },
    del(row) {
      modal.confirm({
        title: "确认删除该条保护经费信息吗？",
        onOk: () => {
          const params = row;
          this.$loading.show("正在处理数据,请等待...");
          setTimeout(() => {
            this.$http
                .post(delProtectionFunds, params)
                .then((res) => {
                  this.$message.info("删除成功");
                  this.$loading.hide();
                  this.findList()
                })
                .catch((error) => {
                  console.log(JSON.stringify(error));
                  this.$loading.hide();
                })
                .finally(() => {});
          }, 50);
        },
        onCancel: () => {},
      });
    },
    exportExcel() {
      this.$refs.tableList.exportData("保护经费管理",'csv')
    },
    flushPage() {
      this.queryParam = {}
      this.findList();
    },
    //查看
    view(row) {
      this.modalTitle = '查看'
      this.showOrHide();
      this.getNodeList(row);
      this.formInfo = row
    },
    addNode(){
      this.nodeList.push({})
    },
    getNodeList(row){
      const params = {}
      params.h0201 = row.h0201
      this.$http
            .post(getNodeList, params)
            .then((res) => {
                this.nodeList = res.result
            })
            .catch((error) => {
            })
    },
    edit(row) {
      this.modalTitle = '编辑'
      this.showOrHide();
      this.getNodeList(row);
      this.formInfo = row
    },
    columnChange() {
      this.$refs.tableList.refreshColumn();
    },
    remind(row){

    }
  },
};
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;


  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 60px);
  }
}
// /*表格 筛选-输入框*/
// ::v-deep .vxe-table--filter-wrapper {
//   input {
//     background: #002a44;
//     padding-left: 6px;
//     line-height: 32px;
//     box-shadow: none !important;
//     border: none !important;
//   }
// }
</style>
